<template>
    <div class="todo">
        <div class="todoitem" v-for="todo in todos" :key="todo.todoindex">
            <div class="todomain"><li style="display:inline;">{{todo.todoitem}}</li></div>
            <!-- <li style="display:inline;">{{todo.todoitem}}</li> -->
            <div class="todobtn"><button v-on="del" style="height:50px;">delete</button></div>
        </div>
    </div>
</template>

<script>
// import InputBar from "./InputBar"
// import {msg} from "./InputBar.vue"
export default({
    name:'TodoItem',
    props:{
        todos:{
            type:Array,
        }
    },
    data:function(){
        return {
            // 实现父子间通信去了
            // todos:[{todoindex:1,todoitem:'vue'},{todoindex:2,todoitem:'js'},{todoindex:3,todoitem:'阿巴阿巴'}]
        }
    },
    methods:{
        del:function(){
            this.$emit(delet)
        }
    },
    // components:{InputBar}
})
</script>

<style scoped>
    .todo{
        width:500px;
        margin: auto;
        margin-top: 20px;
    }
    .todomain,.todobtn{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .todomain{
        width:300px;
    }
    .todobtn{
        width:200px;
    }
    .todoitem{
        height: 100px;
        width: 500px;
        display: flex;
        background-color: rgb(209, 209, 255);
    }
    .todoitem:hover{
        background-color: rgb(200, 234, 255);
    }
</style>
